<template>
  <div id="salaryTemplate">
    <div class="pageHead">
      <div class="left">
        <el-form :model="form" label-width="auto" inline>
          <el-form-item>
            <el-input v-model="form.tempName" class="maxSelect" placeholder="模板名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.subId" class="maxSelect" clearable>
              <el-option v-for="item in companyList" :key="item.subid" :value="item.subid" :label="item.subName"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" round size="medium" @click="getInitData" :loading="loading">搜索</el-button>
      </div>
      <div class="right">
        <el-button type="primary" round size="medium" @click="onRouterPush()">新增工资模板</el-button>
      </div>
    </div>
    <div class="pageMain">
      <el-table :data="tableData" size="medium" height="100%" v-loading="loading">
        <el-table-column prop="name" label="工资表模板名称" align="center" />
        <el-table-column prop="" label="计税规则" align="center">
          <template slot-scope="{ row }">
            {{ handleType(row.taxType) }}
          </template>
        </el-table-column>
        <el-table-column prop="subName" label="所属公司" align="center" />
        <el-table-column prop="scope" label="适用范围" align="center" />
        <el-table-column prop="remarks" label="备注" align="center" />
        <el-table-column prop="" label="操作" width="180" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="onEdit(row)">编辑</el-button>
            <el-button type="text" size="small" @click="onDel(row)">删除</el-button>
            <el-button type="text" size="small" @click="onCopy(row)">复制</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getCompanyList } from "@/util/xc/utils";
import { mapState } from "vuex";
export default {
  name: "salaryTemplate",
  data() {
    return {
      form: {},
      tableData: [],
      loading: false,
    };
  },
  computed: {
    ...mapState({
      ruleArr: (state) => state.reward.ruleArr,
      companyList: (state) => state.reward.companyList,
    }),
  },
  methods: {
    onRouterPush(query) {
      this.$router.push({ name: "addTemplate", query: { ...query, random: Math.random() } });
    },
    onCopy(row) {
      this.onRouterPush({ id: row.id, copy: true });
    },
    onEdit(row) {
      this.onRouterPush({ id: row.id });
    },
    onDel(row) {
      this.$confirm("确认删除吗", "提示", {}).then(async () => {
        try {
          this.loading = true;
          await this.$api.smartSalary.removeSalaryTemplate({ id: row.id });
          await this.getInitData();
          this.$message({ message: "删除成功", type: "success" });
        } catch {
          this.$message({ message: "删除失败", type: "error" });
        } finally {
          this.loading = false;
        }
      });
    },
    async getInitData() {
      try {
        const params = { ...this.form };
        this.loading = true;
        const { data } = await this.$api.smartSalary.getSalaryTemplates(params).then((res) => res.data);
        this.tableData = data;
      } finally {
        this.loading = false;
      }
    },
    ...{
      handleType(type) {
        return this.ruleArr.find((item) => item.value == type)?.label || "";
      },
    },
  },
  async activated() {
    await this.getInitData();
  },
  mounted() {
    getCompanyList();
  },
};
</script>
<style lang="less" scoped>
#salaryTemplate {
  .pageHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .left,
    .right {
      display: flex;
      align-items: baseline;
    }
  }
  :deep( .el-table th.el-table__cell ){
    background: #f7f8fc;
  }
  .el-button {
    margin-left: 0;
  }
  .maxSelect {
    width: 200px;
  }
}
</style>
